<template>
  <!-- 正确使用图标组件 -->
  <div>
    <el-icon><Refresh /></el-icon>
    <el-icon><Calendar /></el-icon>
    <el-input
      v-model="para"
      style="width: 240px"
      placeholder="Please input"
      :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
      :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
    />
    <el-input
      v-model="input1"
      style="width: 240px"
      placeholder="Pick a date"
      suffix-icon="Calendar"
    />
    <el-input
      v-model="input2"
      style="width: 240px"
      placeholder="Type something"
      prefix-icon="Search"
    />
    <!-- 使用新的图标组件 -->
    <Edit class="input1" />
    <el-button type="primary">
      <!-- 使用图标插槽 -->
      <template #icon>
        <Search />
      </template>
      搜索
    </el-button>
    <el-button type="danger" plain @click="logout">退出登录</el-button>
  </div>
</template>

<script>
import { Search, Calendar } from "@element-plus/icons-vue";
export default {
  components: { Search, Calendar },
  name: "AnotherComponent",
  data() {
    return {
      input: "",
      input2: "",
      input1: "",
    };
  },
  methods: {
    test() {},
    logout() {
      this.$router.push("/AiLoginView");
    },
  },
  mounted() {},
};

// import { Search, Edit, Share, Delete } from '@element-plus/icons-vue'
// import { ref } from 'vue'

// let input2 = ref('')
</script>
<style scoped>
.input1 {
  width: 100px;
  margin: 20px;
}
.input2 {
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
}
</style>
